<template>
    <el-form-item :label="`${data.label ? data.label+':' : ''}`" :label-width="data.labelWidth">
        <!-- 【input】输入框 -->
        <el-input @input="handleChang" :value="form[field]" :placeholder="data.placeholder" v-if="data.type=='input'" class="_value-width"></el-input>
        <!-- 【textarea】文本域 -->
        <el-input type="textarea" @input="handleChang" :value="form[field]" :placeholder="data.placeholder" v-if="data.type=='textarea'" class="_value-width"></el-input>
        <!-- 【select】下拉选择 -->
        <el-select @input="handleChang" :value="form[field]" :placeholder="data.placeholder" v-if="data.type=='select'" class="_value-width">
            <el-option :label="_item.label" :value="_item.value" v-for="_item,_index in data.option" :key="_index"></el-option>
        </el-select>
        <!-- 【date】日期选择 -->
        <el-date-picker type="date" @input="handleChang" :value="form[field]" :placeholder="data.placeholder" v-if="data.type=='date'" class="_value-width"></el-date-picker>
        <!-- 【daterang】日期范围 -->
        <el-date-picker :value="form[field]" type="daterange" :range-separator="data.range" :start-placeholder="data.start" :end-placeholder="data.end" class="_value-width"></el-date-picker>
        <!-- 【time】时间选择 -->
        <el-time-picker @input="handleChang" :value="form[field]" :placeholder="data.placeholder" v-if="data.type=='time'" class="_value-width"></el-time-picker>
        <!-- 【datetimerange】时间段选择 -->
        <el-date-picker type="datetimerange" @input="handleChang" :value="form[field]" :placeholder="data.placeholder" v-if="data.type=='datetimerange'" :range-separator="data.range" :start-placeholder="data.start" :end-placeholder="data.end" class="_value-width">
        </el-date-picker>
        <!-- 【switch】操作开关 -->
        <el-switch @input="handleChang" :value="form[field]" v-if="data.type=='switch'" class="_value-width"></el-switch>
        <!-- 【checkbox】多选按钮 -->
        <el-checkbox-group @input="handleChang" :value="form[field]" v-if="data.type=='checkbox'" class="_value-width">
            <el-checkbox v-for="item,_index in data.option" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
        </el-checkbox-group>
        <!-- 【radio】单选按钮 -->
        <el-radio-group @input="handleChang" :value="form[field]" v-if="data.type=='radio'" class="_value-width">
            <el-radio :label="_item.value" v-for="_item,_index in data.option" :key="_index">{{_item.label}}</el-radio>
        </el-radio-group>
        <!--[address]地址选择 -->
        <el-cascader @input="handleChang" v-if="data.type=='address'" :value="form[field]" :placeholder="data.placeholder" :options="options" :disabled="data.disabled" class="_value-width"></el-cascader>
        <!-- 【upload】图片上传 -->
        <ModelFile v-if="data.type == 'upload'" @input="handleChang" :limit="data.limit" :value="form[field]" class="_uploadAction"></ModelFile>
        <div v-if="data.type == 'button'">
            <el-button :type="item.type" v-for="item,index in data.option" :key="index" @click="handleButton(item)">{{item.label}}</el-button>
        </div>
    </el-form-item>
</template>
<script type="text/javascript">
import ModelFile from '@/components/ModelFile'
import address from '@/plugins/address.js'
//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapMutations } = createNamespacedHelpers('multifunction')

export default {
    components: {
        ModelFile,
    },
    props: {
        field: [String, Number],
        data: [Array, Object],
    },
    data() {
        return {
          value1: '',
            options: address,
            tips: {
                type: 'success',
                message: '操作成功！',
                url: ''
            },
            torget: {
                type: 'back', //默认返回上一页
                path: '', //目标页路径
            },
        }
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {
        ...mapState(['form']),
    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {

    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    mounted() {
        if (this.data.type == 'select') {
            // 回调函数
            var _this = this;
            var callback = function(res) {
                _this.data['option'] = [];
                if (res.length > 0) {
                    res.forEach(function(item, index) {
                        var obj = {};
                        for (var key in _this.data.group) {
                            obj[key] = item[_this.data.group[key]]
                        }
                        _this.data.option[index] = obj
                    })
                }
            }

            if (this.data.hasOwnProperty('url')) {
                this.getOptionData({
                    model: this.data.url[0],
                    action: this.data.url[1],
                    callback: callback
                });
            }
        }

        //console.log("chakan", this);
    },
    /**
     * 页面方法
     * @type {Object}
     */
    methods: {
        ...mapMutations(['setField']),
        ...mapMutations(['resetForm']),
        ...mapActions(['submitFormData']),
        ...mapActions(['getOptionData']),
        //数据改变
        handleChang(data) {
            this.setField({
                key: this.field,
                value: data
            })
        },
        // 提交数据
        handleButton(data) {
            switch (data.action) {
                case "submit":
                    var _this = this;
                    if (data.callback) {
                        this.torget = data.callback;
                        if (data.callback.tips) {
                            this.tips = data.callback.tips
                        }
                    }
                    var callback = function() {
                        _this.$message({
                            message: _this.tips.message,
                            type: _this.tips.type,
                        });

                        // 路由跳转
                        console.log('路径', _this.torget)
                        if (_this.torget.type == 'back') {
                            _this.$router.go(-1);
                        } else {
                            console.log(_this.torget.path)
                            _this.$router.push({ path: _this.torget.path });
                        }
                    };
                    this.submitFormData(callback);
                    // console.log("submit代码块");
                    break;
                case "reset":
                    this.resetForm();
                    // console.log("reset代码块");
                    break;
            }
        }
    }

}
</script>
<style type="text/css" lang="scss">
._value-width {
    width: 100%;
}

.el-scrollbar:not(.el-menu--collapse) {
    width: 100%;
    min-height: 0px;
}
</style>